<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="./script/rem.js"></script>
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script type="text/javascript" src="./script/aui-slide.js"></script>
  <script type="text/javascript" src="./script/jquery.min.js"></script>
  <script type="text/javascript" src="./script/doT.min.js"></script>
  <script type="text/javascript" src="./script/base.js"></script>
  <script type="text/javascript" src="./script/api.js"></script></head>
  <script type="text/javascript" src="./script/aui-tab.js" ></script>
  <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>

  <header class="head" style="padding-top:0.4rem;">
    <div class="head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
    <h3>添加收货地址</h3>
 <div class="head-r"></div>
  </header>
  <div class="head-d" style="padding-top:0.4rem;"></div>
  <ul class="address-add">
   <li>
     <label>收货人：</label>
     <input type="text" placeholder="请填写收货人" id="name">
   </li>
   <li>
     <label>联系方式：</label>
     <input type="text" placeholder="请填写联系方式" id="phone">
   </li>
   <li onclick="chooseArea();">
     <label>城市区域</label>
     <p><span id="pro">北京</span><span id="city">北京市</span><span id="area">东城区</span></p>
     <i class="fa fa-angle-right"></i>
   </li>
<!--    <li>
     <label>收货地址</label>
     <p>实验中学</p>
     <i class="fa fa-angle-right"></i>
   </li> -->
   <li>
     <label>详细地址：</label>
     <input type="text" placeholder="请填写详细地址" id="address">
   </li>
 </ul>
 <ul class="list-input">
  <li style="justify-content:space-between;">
    <label>默认地址:</label>
    <div class="list-input-r">
      <div id="default" class="list-input-switch" onclick="list_input_switch()"></div>
    </div>
  </li>
</ul>

<div class="btn-1 mt60" onclick="saveAddress();">保存</div>


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript">

  apiready = function(){
    is_default = 0;
    full_id = '0:110000:110100:110101';
    proCidBack = 110000;
    cityCidBack = 110100;
    areaCidBack = 110101;
  }

  // 打开省市区选择器
  function chooseArea(){

    api.readFile({
      path: 'widget://res/city.json'
    }, function(ret, err){
      if( ret ){
       // alert( JSON.stringify( ret ) );

       var pro = eval(ret.data);
       for (var i = 0; i < pro.length; i++) {
        if (pro[i].cid == proCidBack) {
          // 省下标
          proIndex = i;

          var city = pro[i].sub;
          for (var j = 0; j < city.length; j++) {
            if (city[j].cid == cityCidBack) {
              // 市下标
              cityIndex = j;
              var area = city[j].sub;
              for (var k = 0; k < area.length; k++) {
                if (area[k].cid == areaCidBack) {
                  // 区下标
                  areaIndex = k;

                  var UIActionSelector = api.require('UIActionSelector');
                  UIActionSelector.open({
                    datas: 'widget://res/city.json',
                    layout: {
                      row: 5,
                      col: 3,
                      height: 30,
                      size: 12,
                      sizeActive: 14,
                      rowSpacing: 5,
                      colSpacing: 10,
                      maskBg: 'rgba(0,0,0,0.2)',
                      bg: '#fff',
                      color: '#888',
                      colorActive: '#f00',
                      colorSelected: '#f00'
                    },
                    animation: true,
                    cancel: {
                      text: '取消',
                      size: 12,
                      w: 90,
                      h: 35,
                      bg: '#fff',
                      bgActive: '#ccc',
                      color: '#888',
                      colorActive: '#fff'
                    },
                    ok: {
                      text: '确定',
                      size: 12,
                      w: 90,
                      h: 35,
                      bg: '#fff',
                      bgActive: '#ccc',
                      color: '#888',
                      colorActive: '#fff'
                    },
                    title: {
                      text: '请选择',
                      size: 12,
                      h: 44,
                      bg: '#eee',
                      color: '#888'
                    },
                    actives: [proIndex,cityIndex,areaIndex],
                    fixedOn: api.frameName
                  }, function(ret, err) {
                    if (ret) {
                         // alert(JSON.stringify(ret));
                         if (ret.eventType == 'ok') {

                          proName = ret.level1;
                          cityName = ret.level2;
                          areaName = ret.level3;

                          full_id = ret.selectedInfo[2].full_id;

                          $('#pro').html(proName);
                          $('#city').html(cityName);
                          $('#area').html(areaName);

                          selectedInfo = ret.selectedInfo;

                          // 获取省市区 cid 用于遍历循环查找下标 供模块使用
                          proCidBack = selectedInfo[0].cid;
                          cityCidBack = selectedInfo[1].cid;
                          areaCidBack = selectedInfo[2].cid;


                        }
                      } else {
                          // alert(JSON.stringify(err));
                        }
                      });
                }
              }
            }
          }
        }
      }
    }
  });

  }


  // 保存收货地址
  function saveAddress(){

    // 判断是否为默认
    var isDefault = $('#default').hasClass("active");
    var defaultValue = 0;
    if (isDefault) {
      defaultValue = 1;
    }else{
      defaultValue = 0;
    }

    var name = $api.byId('name').value;
    var phone = $api.byId('phone').value;
    var address = $api.byId('address').value;
    var token = $api.getStorage('token');

    if (!name) {
      api.toast({
        msg: '请填写收货人姓名',
        duration: 2000,
        location: 'bottom'
      });
      return false;
    }

    if (!phone) {
      api.toast({
        msg: '请填写联系方式',
        duration: 2000,
        location: 'bottom'
      });
      return false;
    }

    // var re = /^1\d{10}$/;
    // if (!re.test(mobile)) {
    //   api.toast({
    //     msg: '请输入正确的联系方式',
    //     duration: 2000,
    //     location: 'bottom'
    //   });
    // }

    if (!full_id) {
      api.toast({
        msg: '请选择城市区域',
        duration: 2000,
        location: 'bottom'
      });
      return false;
    }

    if (!address) {
      api.toast({
        msg: '请填写详细地址',
        duration: 2000,
        location: 'bottom'
      });
      return false;
    }

    api.ajax({
      url: webAddress + '/api/address/add',
      method: 'post',
      data: {
        values: {
          full_id: full_id,
          name: name,
          phone: phone,
          address: address,
          is_default: defaultValue,
        },
      },
      headers: {
        Authorization: 'Bearer ' + token,
        Accept: 'application/json',
      },
    },function(ret, err){
      if (ret) {
        // alert( JSON.stringify( ret ) );
        if (ret.status_code == 200) {
          api.toast({
            msg: ret.message,
            duration: 2000,
            location: 'bottom',
            global: true,
          });
        }
        api.sendEvent({
          name: 'reload'
        });
        api.closeWin();
      } else {
        // alert( JSON.stringify( err ) );
        api.toast({
          msg: err.body.message,
          duration: 2000,
          location: 'bottom'
        });
        return false;
      }
    });
  }

  function closeWin(){
    api.closeWin({
    });
  }
</script>
</html>